<!-- 参数 -->
<!-- 展示等级和nft信息 -->
/**
* preview 封面
goodsName 标题
bacg 卡片背景色
nftNameColor 标题颜色 默认:#fff
titleTextAlign 标题文字对齐方式 默认:left
handleThemeType 主题类型
inventory 发行量
price 价格
cardType card类型
*/
<template>
	<view class="nft_card_container" @tap="changeUrl" :style="{'background':bacg}">
		<!-- 封面 -->
		<view class="cover" v-if="cardType != 'identityCard'">
			<image :src="item.metadataImage" mode=""></image>
		</view>

		<view class="cover" v-if="cardType === 'identityCard'">
			<image :src="item.gradeCover" mode=""></image>
		</view>

		<view class="info">
			<!-- 标题  nft标题/等级标题-->
			<view class="title" :style="{'color':nftNameColor}">
				<!-- 主题取值 goodsName -->
				<view class="">{{ item.goodsName || item.name || item.theme.themeName}}</view>
				<!-- 类型 -->
				<view class="typeId">{{ handleThemeType }}</view>
			</view>
			<!-- 主题展示 -->
			<!-- normalCard 市场标准nft卡片 -->
			<view v-if="cardType === 'normalCard'">
				<view class="shop">
					发行量 <text class="circulation">{{ item.inventory || item.totalSupply }}</text>份
				</view>
				<!-- 价格 -->
				<view class="price">
					<view>价格</view>
					<view>
						¥ <text class="price_num">{{ item.price }}</text> {{ ccy }}
					</view>
				</view>
			</view>
			<!-- 身份展示 -->
			<!-- identityCard 身份标准nft卡片 -->
			<view v-if="cardType === 'identityCard'">
				<view class="shop">
					总量 <text>{{ item.inventory || item.totalSupply }}份</text>
				</view>
				<view class="price">
					<view>等级</view>
					<view>
						<text class="price_num">{{ item.grade }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			// 微信小程序中 options 选项
			multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
			styleIsolation: "isolated", //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
			addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
			virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
		},
		data() {
			return {
				ccy: ""
			};
		},
		props: {
			item: {
				type: Object
			},
			// 组件总背景颜色
			bacg: {
				type: String,
				default: 'rgba(255,255,255,0.1)',
			},
			// 标题颜色
			nftNameColor: {
				type: String,
				default: '#fff',
			},
			// 卡片类型
			cardType: {
				type: String,
				default: 'normalCard',
			}
		},
		created() {
			console.log('this.item', this.item)
			console.log('cardType', this.cardType)
			this.ccy = getApp().globalData.ccy
		},
		computed: {
			// 处理商品类型
			handleThemeType() {
				switch (this.item?.theme?.type) {
					case 1:
						return 'POAP'
					case 2:
						return '门票'
					case 3:
						return '证书'
					case 4:
						return '勋章'
					case 5:
						return '藏品'
					case 6:
						return 'PASS卡'
					default:
						return ''
				}
			}
		},
		methods: {
			changeUrl() {
				this.$emit("changeUrl")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nft_card_container {
		width: 48%;
		background: $echo-nft-card-bg-color;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 60rpx;

		.cover {
			width: 100%;
			height: 340rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			padding: 20rpx 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.typeId {
					color: #777;
					font-size: 24rpx;
				}
			}

			.shop {
				color: #777;
				padding: 10rpx 0 4rpx;
				font-size: 24rpx;

				.circulation {
					color: $echo-main-color;
					margin: 0 4rpx;
				}
			}

			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777;
				font-size: 24rpx;

				&_num {
					color: $echo-main-color;
					font-size: 34rpx;
					margin: 0 6rpx;
				}
			}
		}
	}
</style>
